<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃鸡练习</title>
</head>

<body>
    <div>
        <button id="btn1">将吃鸡放到所有城市后面</button>
        <button id="btn2">将吃鸡放到所有城市前面</button>
        <button id="btn3">将吃鸡放到上海的后面</button>
        <button id="btn4">将吃鸡放到上海的前面</button>
        <button id="btn5">删除北京</button>
        <button id="btn6">删除所有节点</button>
    </div>
    <ul>
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
    <script>
        let ul=document.querySelector("ul");
        let li=document.querySelector("li");
        let shanghai=document.getElementById("shanghai");
        let beijing=document.getElementById("beijing");
        let wangzherongyao=document.getElementById("wangzherongyao");
        let chiji=document.getElementById("chiji");
        document.getElementById("btn1").addEventListener("click",function(){
            ul.insertBefore(chiji,wangzherongyao);
        })
        document.getElementById("btn2").addEventListener("click",function(){
            ul.insertBefore(chiji,li);
        })
        document.getElementById("btn3").addEventListener("click",function(){
            ul.insertBefore(shanghai,chiji);
        })
        document.getElementById("btn4").addEventListener("click",function(){
            ul.insertBefore(chiji,shanghai);
        })
        document.getElementById("btn5").addEventListener("click",function(){
            ul.removeChild(beijing);
        })
        document.getElementById("btn6").addEventListener("click",function(){
            document.body.removeChild(ul);
        })

    </script>

</html>